<template>
	<view class="bigBox">
		<view class="title">{{dataForm.ruleContent}}</view>
		<u-gap height="6" bgColor="#f2f2f2"></u-gap>
		
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					隐患判断
				</view>
				<view class="right1">
					<view class="level-not">
						无隐患
					</view>
				</view>
			</view>
		</view>
		
		<view class="kiss-title">
			<view class="left">
				巡查照片<view v-if="isInspec == 0" style="color: #8c8c8c;">(可传3张)</view>
			</view>
		</view>
		<view class="kiss-upload" style="padding: 0 32rpx 32rpx 32rpx;">
			<view class="textInput" v-if="isInspec == 1 && fileList1.length == 0">暂无记录照片</view>

			<view class="imgBox" v-else>
				<view class="img" v-for="v in imgList">
					<image @tap="previewImage(v,imgList)" :src="v"></image>
				</view>
				<video class="video" v-for="v in videoList" :src="v"></video>
			</view>

		</view>
		<view class="kiss-upDown-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					备注信息
				</view>
			</view>
			<view class="textInput">{{dataForm.remark || '无备注信息'}}</view>
		</view>
		
		<!-- <view class="kiss-list" v-if="isShowTime == 1">
			<view class="kiss-list-title">
				<view class="left">
					<view style="color: red;" v-if="isInspec == 0">*</view>
					巡查时间
				</view>
				<view class="right1">
					<view :class="[dataForm.updateTime  ? 'select-bg' : '']">
						{{ dataForm.updateTime  ? dataForm.updateTime : '无' }}
					</view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import uploadVideo from '@/components/uploadVideo/index.vue';
	export default {
		components: {
			uploadVideo
		},
		data() {
			return {
				isTroble: 1, // 0.无需整改 1 未整改 2.重新整改 3 已整改 4 整改完成
				isInspec: 1, // 0 编辑 1 查看详情
				showBumen: false,
				bumenColumns: [
					[{
							label: '男',
							id: '1'
						},
						{
							label: '女',
							id: '2'
						}
					]
				],
				onoff: true,
				fileList1: [],
				sourceType: ['album', 'camera'],
				dangerId: '',
				dataForm: {},
				userId: uni.getStorageSync('userInfo').userId,
				imgList: [],
				videoList: [],
				// 整改照片
				imgList2: [],
				videoList2: [],
				// 复查
				saveParams: {
					pictures: '',
				},
				file: '',
				// 是否设置过签名
				isSign: false,
				oldSign: '',
				// 签名设置
				sign: '',
				// 复查照片
				imgList3:[],
				videoList3: [],
				isShowTime:1,
			};
		},
		onLoad(options) {
			this.dangerId = options.id
			this.initData()
			if(options.isShowTime){
				this.isShowTime = options.isShowTime
			}
		},
		
		methods: {
			initData() {
				uni.$u.http.get(`/check/mobile/appDangerInfo/getDangerDetail/${this.dangerId}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						this.dataForm.sendSmsFlag = res.data.sendSmsFlag ? true : false
						this.handleFileList(res.data)
						if (res.data.dangerPhoto != '') {
							// 图片回显
							let arr = []
							res.data.dangerPhoto.split(',').map(item => {
								let dd = {
									url: item
								}
								arr.push(dd);
							})
							this.fileList1 = arr
						} else {
							this.fileList1 = []
						}
					}
				}).catch(err => {})
			},
			
			//处理判断是图片还是video
			handleFileList(data) {
				// 隐患照片
				let dangerPhoto = data.dangerPhoto
				if (dangerPhoto) {
					let fileList = dangerPhoto.split(",")

					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList.push(item)
						} else {
							this.imgList.push(item)
						}
					})
				}
				// 整改照片
				let rectifyPhoto = data.rectifyPhoto
				if (rectifyPhoto) {
					let fileList2 = rectifyPhoto.split(",")
					fileList2.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList2.push(item)
						} else {
							this.imgList2.push(item)
						}
					})
				}
				// 复查照片
				let reviewPhoto = data.reviewPhoto
				if (reviewPhoto) {
					let fileList3 = reviewPhoto.split(",")
					fileList3.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList3.push(item)
						} else {
							this.imgList3.push(item)
						}
					})
				}
			},
			//预览图片
			previewImage: function(e, s) {
				let imgList = []
				if (s.pictures) {
					imgList = this.getpictureList(s.pictures)
				} else {
					imgList = s
				}
				uni.previewImage({
					current: e,
					urls: imgList,
				});
			},
			//处理图片
			getpictureList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					var imgList = []
					for (let i = 0; i < splitAdd.length; i++) {
						let iOrV = splitAdd[i].split("?")[0].split(".")
						let iOrVL = splitAdd[i].split("?")[0].split(".").length - 1
						if (iOrV[iOrVL] != 'mp4') {
							imgList.push(splitAdd[i])
						}
					}
					return imgList
				} else {
					return []
				}
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.bigBox {

		.title {
			padding: 32rpx;
			margin-right: 16rpx;
			word-wrap: break-word;
			word-break: break-all;
		}

		.box {
			padding: 0 20rpx;
		}

		.bx-upload {
			padding: 20rpx 30rpx;
			background: #fff;
			border-bottom: 1px solid #d6d7d9;
		}

		.bottom-subside {
			width: 100%;
			height: 120rpx;
		}

		.bx-bottom {
			width: 100%;
			background: #f2f2f2;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
			position: fixed;
			z-index: 9;
			bottom: 0;

			.btn-right {
				width: 80%;
				height: 92rpx;
				border-radius: 12rpx;
				background: #0F53AC;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 34rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
			}
		}

		.lookName {
			color: #0F53AC;
			margin-left: 16rpx;
		}

		.bottom-box {
			width: 100%;
			background: #f2f2f2;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;

			.btn {
				width: 80%;
				height: 92rpx;
				border-radius: 12rpx;
				background: #0F53AC;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 34rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
			}

			.btn2 {
				width: 45%;
				height: 92rpx;
				border-radius: 12rpx;
				background: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #0F53AC;
				border: 1px solid #0F53AC;
				font-size: 34rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
			}

			.btn3 {
				width: 45%;
				height: 92rpx;
				border-radius: 12rpx;
				background: #0F53AC;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 34rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
				margin-left: 12rpx;
			}
		}
	}

	.imgBox {
		display: flex;

		.img {
			width: 27vw;
			height: 27vw;
			margin-bottom: 4vw;
			margin-right: 4vw;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.video {
			width: 27vw;
			height: 27vw;
			margin-bottom: 4vw;
			margin-right: 4vw;
		}
	}
</style>
